<div class="box boss-sepcial">
  <div class="box-heading"><?php echo $heading; ?></div>
  <div class="box-content">
    <div id="boss-sepcial-content<?php echo $module; ?>" class="list_carousel responsive">
      <ul class="content-products box-product" ><?php $i = 0; $count_product = count($products);
        while($i < $count_product){  ?><li class="products">
          <?php $j=0; while($j<3 && $i < $count_product){ ?>
            <?php $product = $products[$i]; ?>
            <div class="not-animated" data-animate="fadeInUp" data-delay="200">
                <?php if($product['special']) { ?>
                <div class="promotion-icon">
                    <?php echo $product['promotion']; ?>
                </div>
                <?php } ?>

            <?php if ($product['thumb']) { ?>
            <div class="image"><a class="box_img" data-id="<?php echo $product['product_id']; ?>" href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>"/></a></div>
            <?php } ?>
            <div class="product_detail">
            <div class="name"><a href="<?php echo $product['href']; ?>" title="<?php echo $product['name']; ?>"><?php echo $product['name']; ?></a></div>
            <?php if ($product['price']) { ?>
            <div class="price">
              <?php if (!$product['special']) { ?>
              <?php echo $product['price']; ?>
              <?php } else { ?>
              <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
              <?php } ?>
            </div>
            <?php } ?>
	       <div class="cart"><span class="button button-red"><input type="button" value="<?php echo $button_cart; ?>" onclick="boss_addToCart('<?php echo $product['product_id']; ?>');" class="button button-red" /></span></div>
            </div>
            </div>
            <?php $j++; $i++; ?>
          <?php } ?>
        </li><?php } ?>
      </ul>
      <a id="prev_special<?php echo $module; ?>" class="prev" href="javascript:void(0)">&lt;</a>
      <a id="next_special<?php echo $module; ?>" class="next" href="javascript:void(0)">&gt;</a>
    </div>
  </div>
<script type="text/javascript"><!--
$(window).load(function(){
  $('#boss-sepcial-content<?php echo $module; ?> > ul').carouFredSel({
    responsive: true,
    width: '100%',
    height: 'variable',
    prev: '#prev_special<?php echo $module; ?>',
    next: '#next_special<?php echo $module; ?>',
    auto: false,
    swipe: {
        onTouch : true
      },
    items: {
        width: 320 ,
        height: 'auto',
        visible: {
          min: 1,
          max: 1
        }
      },
    scroll: {
        items : 'auto',
        direction : 'left',    //  The direction of the transition.
        duration  : 1000   //  The duration of the transition.
      }
  });
});
//--></script>
</div>


